<template>
  <div class="tab-nav-container">
    <div class="tab-nav-header">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab-item', { 'is-active': activeTab === tab.id }]"
        @click="handleTabChange(tab.id)"
      >
        <span class="tab-label">{{ tab.name }}</span>
        <span v-if="tab.tag" class="tab-tag">{{ tab.tag }}</span>
      </div>
    </div>

    <div class="tab-content">
      <transition name="fade" mode="out-in">
        <div v-show="activeTab === 1" class="content-section">
          <div class="grid-container">
            <div
              class="grid-item"
              v-for="(item, index) in visibleItems"
              :key="index"
              @click="goToDetail(item)"
            >
              <img :src="item.url" alt="" />
              <p>{{ item.title }}</p>
              <div class="group_type">
                <span class="cityType">{{ item.cityType }}</span>
                <span class="fromType">{{ item.fromType }}</span>
              </div>
              <div class="group_add">
                <div class="price">￥{{ item.price }}</div>
                <div
                  class="add"
                  @click="addToCart(item, $event)"
                  :class="{ animate: item.animating }"
                >
                  +
                </div>
              </div>
            </div>
          </div>

          <!-- 加载更多触发器和状态提示 -->
          <!-- <div ref="loader" class="loader" v-if="hasMore && !isLoading">
            <div class="loading-spinner"></div>
            <span>加载中...</span>
          </div> -->

          <div class="no-more" v-if="!hasMore && visibleItems.length > 0">没有更多商品了~</div>
        </div>
      </transition>

      <transition name="fade" mode="out-in">
        <div v-show="activeTab === 2" class="content-section">
          <h3>进口好物专区</h3>
        </div>
      </transition>

      <transition name="fade" mode="out-in">
        <div v-show="activeTab === 3" class="content-section">
          <h3>其他推荐</h3>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useCartStore } from '@/stores/cart'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const router = useRouter()
const cartStore = useCartStore()
const authStore = useAuthStore()

import proCard1 from '@/assets/imgs/product_sorts/pro_img1.png'
import proCard2 from '@/assets/imgs/product_sorts/pro_img2.png'
import proCard3 from '@/assets/imgs/product_sorts/pro_img3.png'
import proCard4 from '@/assets/imgs/product_sorts/pro_img4.png'
const allItems = [
  {
    id: 1,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 2,
    url: proCard2,
    title: '言觉板栗蜜薯10斤红薯西瓜红 新鲜现挖沙地蜜薯小香薯河南地瓜山芋 红薯 精选5斤装',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 3,
    url: proCard3,
    title: '兰蔻【返30元券】小黑瓶滤镜水尝鲜盒',
    price: '79.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 4,
    url: proCard4,
    title: '兰蔻全新超修小黑瓶精华115ml抗老维稳护肤品套装七夕情人节礼物',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 5,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 6,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 7,
    url: proCard2,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 8,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 9,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 10,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 11,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 12,
    url: proCard2,
    title: '言觉板栗蜜薯10斤红薯西瓜红 新鲜现挖沙地蜜薯小香薯河南地瓜山芋 红薯 精选5斤装',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 13,
    url: proCard3,
    title: '兰蔻【返30元券】小黑瓶滤镜水尝鲜盒',
    price: '79.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 14,
    url: proCard4,
    title: '兰蔻全新超修小黑瓶精华115ml抗老维稳护肤品套装七夕情人节礼物',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 15,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 16,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 17,
    url: proCard2,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 18,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 19,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 20,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 1,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 2,
    url: proCard2,
    title: '言觉板栗蜜薯10斤红薯西瓜红 新鲜现挖沙地蜜薯小香薯河南地瓜山芋 红薯 精选5斤装',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 3,
    url: proCard3,
    title: '兰蔻【返30元券】小黑瓶滤镜水尝鲜盒',
    price: '79.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 4,
    url: proCard4,
    title: '兰蔻全新超修小黑瓶精华115ml抗老维稳护肤品套装七夕情人节礼物',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 5,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 6,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 7,
    url: proCard2,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 8,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 9,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 10,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 11,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 12,
    url: proCard2,
    title: '言觉板栗蜜薯10斤红薯西瓜红 新鲜现挖沙地蜜薯小香薯河南地瓜山芋 红薯 精选5斤装',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 13,
    url: proCard3,
    title: '兰蔻【返30元券】小黑瓶滤镜水尝鲜盒',
    price: '79.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 14,
    url: proCard4,
    title: '兰蔻全新超修小黑瓶精华115ml抗老维稳护肤品套装七夕情人节礼物',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 15,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 16,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '599.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 17,
    url: proCard2,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 18,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '20.80',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 19,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '1049.00',
    cityType: '京东物流',
    fromType: '京东超市',
  },
  {
    id: 20,
    url: proCard1,
    title: '倍内菲全价狗粮鸭肉梨配方黑金贝内菲蓓培雷冻干金标主厨金毛边牧通用犬  经典鸭肉梨犬粮12kg',
    price: '25.50',
    cityType: '京东物流',
    fromType: '京东超市',
  },
]
// 分页相关数据
const visibleItems = ref([])
const currentPage = ref(1)
const pageSize = 10
const isLoading = ref(false)
const hasMore = ref(true)
const loader = ref(null)

// 模拟API获取数据
const fetchItems = (page) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const start = (page - 1) * pageSize
      const end = start + pageSize
      resolve(allItems.slice(start, end))
    }, 400)
  })
}

// 初始化加载数据
const loadInitialData = async () => {
  isLoading.value = true
  visibleItems.value = await fetchItems(1)
  isLoading.value = false
}

// 加载更多数据
const loadMore = async () => {
  if (isLoading.value || !hasMore.value) return

  isLoading.value = true
  currentPage.value += 1

  try {
    const newItems = await fetchItems(currentPage.value)

    if (newItems.length === 0) {
      hasMore.value = false
    } else {
      visibleItems.value = [...visibleItems.value, ...newItems]
    }
  } finally {
    isLoading.value = false
  }
}

// 初始化Intersection Observer
let observer = null
const initObserver = () => {
  observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        loadMore()
      }
    },
    {
      rootMargin: '100px',
      threshold: 0.1,
    },
  )

  if (loader.value) {
    observer.observe(loader.value)
  }
}

// 组件生命周期
onMounted(() => {
  loadInitialData().then(() => {
    initObserver()
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})

// 原有方法保持不变
const activeTab = ref(1)
const tabs = [
  { id: 1, name: '心选秒杀', tag: 'HOT' },
  { id: 2, name: '进口好物', tag: 'NEW' },
  { id: 3, name: '其他推荐' },
]

const handleTabChange = (tabId) => {
  activeTab.value = tabId
}

const goToDetail = (item) => {
  router.push({
    name: 'DetailProduct',
    params: { id: item.id },
    query: {
      title: item.title,
      price: item.price,
      image: item.url,
      cityType: item.cityType,
      fromType: item.fromType,
    },
  })
}

const addToCart = (product, event) => {
  event.stopPropagation()

  if (!authStore.isLoggedIn) {
    ElMessage.warning('请先登录后再添加商品到购物车')
    return
  }

  // 确保商品数据结构一致，特别是图片路径
  const cartProduct = {
    id: product.id || Date.now(), // 确保有ID
    title: product.title || '默认商品名称',
    price: product.price || '0.00',
    image: product.url || product.image || '', // 兼容不同属性名
    cityType: product.cityType || '京东物流',
    fromType: product.fromType || '京东自营',
    quantity: 1, // 默认数量为1
    selected: true, // 默认选中
    imageLoaded: false, // 图片加载状态
    imageError: false, // 图片错误状态
  }

  cartStore.addItem(cartProduct)
  ElMessage.success('已加入购物车')

  // 添加动画效果
  if (event.target) {
    event.target.classList.add('animate')
    setTimeout(() => {
      event.target.classList.remove('animate')
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
.tab-nav-container {
  $primary-color: #e4393c;
  $text-color: #333;
  $text-light: #666;
  $border-color: #f0f0f0;
  $tag-bg: #fff0f0;
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;

  .tab-nav-header {
    display: flex;
    background: #fff;
    border-bottom: 1px solid $border-color;
    padding: 0 20px;

    .tab-item {
      position: relative;
      padding: 0 24px;
      height: 56px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: $primary-color;

        .tab-label {
          color: $primary-color;
        }
      }

      &.is-active {
        .tab-label {
          color: $primary-color;
          font-weight: 600;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background: $primary-color;
          animation: scaleIn 0.3s ease;
        }
      }

      .tab-label {
        font-size: 16px;
        color: $text-color;
        transition: color 0.3s;
      }

      .tab-tag {
        margin-left: 8px;
        padding: 2px 6px;
        font-size: 12px;
        background: $tag-bg;
        color: $primary-color;
        border-radius: 10px;
        transform: scale(0.9);
        line-height: 1;
      }
    }
  }

  .tab-content {
    padding: 20px;
    background: #fff;

    .grid-container {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 350px;
      margin-left: -18px;
      gap: 5px;

      .grid-item {
        background: #f8f8f8;
        border-radius: 6px;
        padding: 15px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20px;
        cursor: pointer;

        img {
          width: 160px;
          height: 160px;
          object-fit: contain;
        }

        p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          min-height: 3em;
          line-height: 1.5em;
          margin: 8px 0;
          word-break: break-word;
          font-size: 16px;
          color: #333;
        }

        .group_type {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          gap: 10px;

          span {
            padding: 2px 5px;
            font-size: 12px;
            border-radius: 2px;
          }

          .cityType {
            color: #e4393c;
            border: 1px solid lightcoral;
          }

          .fromType {
            color: rgb(76, 200, 161);
            border: 1px solid rgb(76, 200, 161);
          }
        }

        .group_add {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-top: 10px;

          .price {
            font-size: 24px;
            color: rgb(255, 33, 51);
            font-weight: bold;
          }

          .add {
            color: rgb(255, 82, 98);
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 100px;
            text-align: center;
            background-color: rgb(255, 235, 241);
            cursor: pointer;
            transition: all 0.3s;

            &.animate {
              transform: scale(1.2);
            }
          }
        }
      }
    }

    .loader {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #999;

      .loading-spinner {
        width: 30px;
        height: 30px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #e4393c;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
      }
    }

    .no-more {
      text-align: center;
      padding: 20px;
      color: #999;
      font-size: 14px;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes scaleIn {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}
</style>
